﻿<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <title>商品列表页</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black" />
    <meta name="format-detection" content="telephone=no">
    <meta name="renderer" content="webkit" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="renderer" content="webkit|ie-comp|ie-stand" />
    <link rel="shortcut icon" href="/favicon.ico" type="/image/x-icon">
    <link rel="apple-touch-icon-precomposed" href="">
    <link rel="stylesheet" href="../source/src/css/main.css"/>

</head>
<body>
<!-- 商品列表 -->
<div class="shop-list">
    <!-- 搜索 -->
    <div class="search-box clearfix" id="search-box">

    </div>
    <!-- /搜索 -->

    <div class="list-box">
        <ul class="list-ul claerfix" id="list-ul" data-page="1">

        </ul>
    </div>
</div>

<!--底部菜单-->
<div class="pub-nav">
    <ul>
        <li>
            <a href="../index.html">
                <div class="index pic"></div>
                <div class="txt">首页</div>
            </a>
        </li>
        <li>
            <a href="shop_cart.html?v=210818">
                <div class="shopCart pic"><!--<i class="num" id="shop-cart-num">0</i>--></div>
                <div class="txt">购物车</div>
            </a>
        </li>
        <li>
            <a href="./me.html">
                <div class="me pic"></div>
                <div class="txt">我</div>
            </a>
        </li>
    </ul>
</div>
<!--/底部菜单-->

<script id="search-box-tpl" type="text/html">
    <div class="search diy-box" >
        <div class="input-tab">
            <div class="input-tab-txt" data-code="">所有</div>
        </div>
        <div class="search-inp-wrap flex-1">
            <input type="text" class="search-inp flex-1" placeholder="请输入您要搜索的商品">
        </div>
        <i class="search-btn"></i>
    </div>
    <div class="input-tab-nav on" id="TabNav">
        <div class="arrow-box text-c">
            <i class="arrow-ico"></i>
        </div>
        <ul>
            <li class="item tab-li" data-code="">所有</li>
            {{if TypeList}}
            {{each TypeList as li i}}
            <li class="item tab-li" data-code="{{li.Code}}">{{li.Name}}</li>
            {{/each}}
            {{/if}}
        </ul>
    </div>
</script>

<script id="list-ul-tpl" type="text/html">
    {{each ItemList as li i}}
    <li class="item">
        <a href="shop_detail.html?number={{li.Code}}">
            <div class="pic">
                <img src="{{li.Picture}}" alt="">
            </div>
            <div class="txt">
                <h3>{{li.Name}}</h3>
                <div class="spec">
                    助记码：{{li.HelpCode}}
                </div>
            </div>
        </a>
        <div class="btn-box">
                <!--<span class="btn-wrap" id="add-to-favorite">
                    <span class="btn add-to-favorite {{if li.IsCollect==1}}on{{/if}}" data-code="{{li.Code}}"></span>
                </span>-->
                <span class="btn-wrap" id="add-to-shopCart">
                    <span class="btn add-to-shopCart {{if li.IsCar==1}}on{{/if}}" data-code="{{li.Code}}"></span>
                </span>
        </div>
    </li>
    {{/each}}
</script>

<script src="../source/plugin/zepto.min.js"></script>
<script src="../source/plugin/artTemplate.js"></script>
<script src="../source/src/js/common.js"></script>
<script>
    $(function(){
        var init ={
            submitFlag:true,
            render:function(){
                var inson = {
                    "classcode":getQueryString('classcode'),
                    "classname":"",
                    "pageindex":"1",
                    "pagecount":"6",
                    "username":decodeURIComponent(getCookie('username')),
                    "key":user.key,
                    "account":user.account
                };

                $.ajax({
                    url:apiUrl+'/GetProdItems',
                    type:'GET',
                    data:{"json":JSON.stringify(inson)},
                    //dataType :'jsonp',
                    success:function(datas){
                        console.log(datas);
                        var tabHtml = template('search-box-tpl', datas);
                        $('#search-box').html(tabHtml);

                        var html = template('list-ul-tpl', datas);
                        $('#list-ul').html(html);
                    },
                    error:function(datas){
                        console.log(datas)
                    }
                });
            },
            showTypeList:function(){
                $('#search-box').on('tap','.input-tab-txt',function(event){
                    $('.input-tab-nav').toggle();
                    event.stopPropagation();
                });

                $('#search-box').on('touchend','.tab-li',function(event){
                    var $this = $(this);
                    event.preventDefault();
                    event.stopPropagation();
                    $('.input-tab-txt').html($this.html()).attr('data-code',$this.attr('data-code'));
                    $('.input-tab-nav').hide();

                    user.typecode=$this.html();

                    var inson = {
                        "classcode":getQueryString('classcode'),
                        "classname":"",
                        "typecode":$this.html(),
                        "pageindex":"1",
                        "pagecount":"6",
                        "username":decodeURIComponent(getCookie('username')),
                        "key":user.key,
                        "account":user.account
                    };

                    $.ajax({
                        url:apiUrl+'/GetProdItemsByType',
                        type:'GET',
                        data:{"json":JSON.stringify(inson)},
                        //dataType :'jsonp',
                        success:function(datas){
                            console.log(datas);
                            var html = template('list-ul-tpl', datas);
                            $('#list-ul').html(html);
                        },
                        error:function(datas){
                            console.log(datas)
                        }
                    });
                });

                $('body,html').on('tap',function(){
                    $('.input-tab-nav').hide();
                });
            },
            search:function(){
                $('#search-box').on('tap','.search-btn',function(){
                    var inp = $('.search-inp');
//                        if($.trim(inp.val())!=""){
                    var inson = {
                        "classcode":getQueryString('classcode'),
                        "classname":"",
                        "query":inp.val(),
                        "pageindex":"1",
                        "pagecount":"6",
                        "key":user.key,
                        "account":user.account
                    };

                    $.ajax({
                        url:apiUrl+'/GetProdItemsQuery',
                        type:'GET',
                        data:{"json":JSON.stringify(inson)},
                        //dataType :'jsonp',
                        success:function(datas){
                            console.log(datas);
                            var html = template('list-ul-tpl', datas);
                            $('#list-ul').html(html);
                        },
                        error:function(datas){
                            console.log(datas)
                        }
                    });
//                        }
                });
            },
            addToFavorite:function(){//加入收藏夹
                $('#list-ul').on('click','#add-to-favorite',function(){
                    var $this =$(this);
                    if(!$this.hasClass('on')){
                        var inJson = {
                            "OrderLists": [
                                {
                                    "ItemList": [
                                        {
                                            "Code": $(this).find('.add-to-favorite').attr('data-code'),
                                            "Name": "",
                                            "Model": null,
                                            "Picture": "",
                                            "Qty": 0,
                                            "Price":0,
                                            "Total":0
                                        }
                                    ],
                                    "CustNo":getCookie('CustCode'),
                                    "EmpNo":getCookie('EmpCode'),
                                    "Username":decodeURIComponent(getCookie('username')),
                                    "key":user.key,
                                    "account":user.account
                                }
                            ]
                        };

                        $.ajax({
                            url:apiUrl+'/SubmitCollectItems',
                            type:'GET',
                            data:{"json":JSON.stringify(inJson)},
                            // dataType :'jsonp',
                            success:function(datas){
                                if(datas.Success==true){
                                    $this.find('.add-to-favorite').addClass('on');
                                    show_error_tip({str:"加入收藏夹成功"});
                                }else{
                                    show_error_tip({str:"加入收藏夹失败"});
                                }
                            },
                            error:function(datas){
                                console.log(datas.msg)
                            }
                        });
                    }else{
                        show_error_tip({str:"您已加入收藏夹了"});
                    }
                });
            },
            addToCart:function(){
                //加入购物车
                var _this=this;
                $('#list-ul').on('click','#add-to-shopCart',function(){
                    var $this =$(this);
                    _this.submitFlag = false;
                    var inJson = {
                        "OrderLists": [
                            {
                                "ItemList": [
                                    {
                                        "Code": $(this).find('.add-to-shopCart').attr('data-code'),
                                        "Name": "",
                                        "Model": null,
                                        "Picture": "",
                                        "Qty": 1,
                                        "Price": 0,
                                        "Total": 0
                                    }
                                ],
                                "CustNo": getCookie('CustCode'),
                                "EmpNo": getCookie('EmpCode'),
                                "UserName": decodeURIComponent(getCookie('username')),
                                "key": user.key,
                                "account": user.account
                            }
                        ]
                    };

                    if (!_this.submitFlag) {
                        $.ajax({
                            url: apiUrl + '/SubmitCarItems',
                            type: 'GET',
                            data: {"json": JSON.stringify(inJson)},
                            //dataType :'jsonp',
                            success: function (datas) {
                                if (datas.Success == true) {
                                    $this.find('.add-to-shopCart').addClass('on');
                                    show_error_tip({str: "加入购物车成功"});
                                    _this.submitFlag = true;
                                }else{
                                    show_error_tip({str: "加入购物车失败"});
                                }
                            },
                            error: function (datas) {
                                console.log(datas.msg)
                                _this.submitFlag = true;
                            }
                        });
                    }
                });
            },
            showMorePage:function(){
                window.onload=function(){
                    var scrollTimer = null;
                    var listUl = $('#list-ul');
                    $(window).scroll(function(){
                        clearTimeout(scrollTimer);
                        function showMore(){
                            if($('body,html').height() - $(window).scrollTop() -$(window).height() <= 160){
                                var currentPage = listUl.attr('data-page');
                                var totalPage = Math.ceil(1000/6);
                                currentPage++;
                                listUl.attr('data-page',currentPage)
                                if(currentPage<=totalPage){


				            var inson = {
                        		"classcode":getQueryString('classcode'),
                        		"classname":"",
                        		"typecode":user.typecode,
                        		"pageindex":currentPage,
                        		"pagecount":"6",
                        		"username":decodeURIComponent(getCookie('username')),
                        		"key":user.key,
                        		"account":user.account
                    			};

                    		$.ajax({
                        		url:apiUrl+'/GetProdItemsByType',
		                        type:'GET',
		                        data:{"json":JSON.stringify(inson)},
		                        //dataType :'jsonp',
		                        success:function(datas){
                		            console.log(datas);
		                            var html = template('list-ul-tpl', datas);
                		            $('#list-ul').append(html);
		                        },
                	        	error:function(datas){
	                        	    console.log(datas)
	                	        }
        		            });

				                /*
                                    var inson = {
                                        "classcode":getQueryString('classcode'),
                                        "classname":"",
                                        "pageindex":currentPage,
                                        "pagecount":"6",
                                        "key":user.key,
                                        "account":user.account
                                    };

                                    $.ajax({
                                        url:apiUrl+'/GetProdItems',
                                        type:'GET',
                                        data:{"json":JSON.stringify(inson)},
                                        //dataType :'jsonp',
                                        success:function(datas){
                                            console.log(datas);
                                            var html = template('list-ul-tpl', datas);
                                            $('#list-ul').append(html);
                                        },
                                        error:function(datas){
                                            console.log(datas)
                                        }
                                    }); 
				                */

                                }else{
                                    return false;
                                }
                            }
                        }

                        scrollTimer = setTimeout(function(){
                            showMore();
                        },200)
                    });
                }
            },
            init:function(){
                this.render();
                this.showTypeList();
                this.search();
								this.addToFavorite();
                this.addToCart();
                this.showMorePage();
            }
        };
        init.init();
    });
</script>
</body>
</html>